<style>
<!--
{literal}
.groupHeader{
	padding: 3px 0px 0px 0px;
	height: 45px; 
	vertical-align: top; 	
}
.groupHeader div{
	padding: 5px 10px 0px 0px;
	font-weight: normal;
}
.groupHeader a{
	color: #5499BD !important;
}

.groupHeader a:focus, a:active, a:hover{
	color: #D54E21 !important;
}

td.report{
	padding: 3px 0px 0px 0px;
	height: 45px; 
	vertical-align: top;
}

div.report{
	padding: 5px 10px 0px 0px;
	font-weight: normal;
}
{/literal}
-->
</style>
<script type="text/javascript">
{literal}
	$(document).ready(function() {
		$('table#tblAllReports').find('tr:even').addClass('alt');	
		$('span.group').each(function(){
			$(this).hover(
				function(){$('div#'+ 'group_action_' + $(this).attr('id')).show();},
				function(){$('div#'+ 'group_action_' + $(this).attr('id')).hide();} );
		});
		
		// Show/hide actions for groups
		$('div.group').each(function(){
			$(this).hover(
				function(){$(this).show();},
				function(){$(this).hide();});
		});
		
		// Show/hide actions for reports
		$('a.report').each(function(){
			$(this).hover(
				function(){$('div#'+ 'report_action_' + $(this).attr('id')).show();},
				function(){$('div#'+ 'report_action_' + $(this).attr('id')).hide();} );
		});
		$('div.report').each(function(){
			$(this).hover(
				function(){$(this).show();},
				function(){$(this).hide();});
		});
		
		// Dialog register
		$('#confirmDelete').dialog({
				autoOpen: false,
				width: 	400,
				height: 170,
				modal: true,
				resizable: false,
				buttons: {
					{/literal}"{translate}Cancel{/translate}"{literal}: function() {
						$(this).dialog('close');
					},
					{/literal}"{translate}Delete{/translate}"{literal}: function() {
						$('.ui-state-focus').removeClass('ui-state-focus');
						deleteReportGroup();			
					}
				}
			});

		// Dialog register
		$('#confirmDeleteReport').dialog({
				autoOpen: false,
				width: 	400,
				height: 150,
				modal: true,
				resizable: false,
				buttons: {
					{/literal}"{translate}Cancel{/translate}"{literal}: function() {
						$(this).dialog('close');
					},
					{/literal}"{translate}Delete{/translate}"{literal}: function() {						
						deleteReportSubmit();			
					}
				}
			});
		
	});
{/literal}
</script>

<table class="grid" id="tblAllReports" width="700" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th class="first" style="width: 50%">{translate}Report's name{/translate}</th><th class="last">{translate}Description{/translate}</th>
		</tr>
	</thead>
	<tbody>
	{php}
		$groups			=	$this->get_template_vars('groups');
		$reportBundles	=	$this->get_template_vars('reportBundles');
		
		$edit 			=	L10nHelper::_('Edit');
		$delete			=	L10nHelper::_('Delete');
		$editTitle		=	L10nHelper::_('Edit report group');
		$deleteTitle	=	L10nHelper::_('Delete report group');
		$viewTitle		=	L10nHelper::_('View report');
		$input 			=	L10nHelper::_('Input data');
		$inputRpTitle	=	L10nHelper::_('Input data into report');
		$editRpTitle	=	L10nHelper::_('Edit report');
		$deleteRpTitle	=	L10nHelper::_('Delete report');
		
		foreach($groups as $grpId => $grpName){
			if($grpId > 0){
			$groupRow	=	"<tr><td colspan='2' style='text-align: left;' class='first last groupHeader'>
								
									<span class='group' id={$grpId}>{$grpName}</span>
									<div id='group_action_{$grpId}' style='display: none' class='group'>
										<a href='javascript: editGroup($grpId)' title='{$editTitle}'>{$edit}</a>
										<span>|</span>
										<a href='javascript: deleteGroup($grpId)' title='{$deleteTitle}'>{$delete}</a>
									</div>
								
								</td></tr>";
			}
			else{
				$groupRow	=	"<tr><td colspan='2' style='text-align: left;' class='first last groupHeader'>
									<span class='group' id={$grpId}>{$grpName}</span>
								</td></tr>";
			}
			echo $groupRow;
			$reports	=	$reportBundles[$grpId];
			foreach($reports as $report){
				$row	=	"<tr><td style='text-align: left; padding-left: 25px;' class='first report'><a href=\"viewReport?reportId={$report['id']}\" title='{$viewTitle}' class='report' id='{$report['id']}'>{$report['name']}</a>
								<div id='report_action_{$report['id']}' style='display: none' class='report'>
									<a href='javascript: inputData({$report['id']})' title='{$inputRpTitle}'>{$input}</a>
									<span>|</span>
									<a href='javascript: editReport({$report['id']})' title='{$editRpTitle}'>{$edit}</a>
									<span>|</span>
									<a href='javascript: deleteReport({$report['id']})' title='{$deleteRpTitle}'>{$delete}</a>
								</div>
							</td><td class='last'>{$report['description']}</td></tr>";
				echo $row;
			}	
		}	
	{/php}
	</tbody>
</table>

<div id="confirmDelete" title="{$deleteTitle}" style="display: none;">
	<input type="hidden" name="groupId" id="groupId" value="2009">
	<table>
		<tr>
			<td><input type="radio" name="deleteReports" id="deleteReports" value="1"/></td>
			<td><label for="deleteReports">{translate}Delete this group and all reports belong to it.{/translate}</label></td>
		</tr>
		<tr>
			<td><input type="radio" name="deleteReports" id="notDeleteReports" checked="checked" value="0"/></td>
			<td><label for="notDeleteReports">{translate}Delete this group and move all its reports to 'Unknown group'.{/translate}</label></td>
		</tr>
	</table>
</div>

<div id="confirmDeleteReport" title="{$deleteRpTitle}" style="display: none;">
	<input type="hidden" id="deletedReportId" value=""><br />
	<span>{translate}Delete report{/translate}&nbsp;<span id="deletedReportName" class="impression"></span></span>?
</div>